<template>
    <div class="main">
        <div class="single-page-con">
            <div class="single-page">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
        init() {
            console.log('main init');
        }
    },

    mounted() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
html,
body {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    overflow: hidden;
}

.main {
    position: absolute;
    width: 100%;
    height: 100%;
    .single-page-con {
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        bottom: 0;
        overflow: auto;
        background-color: #F0F0F0;
        z-index: 1;
        transition: left .3s;
        .single-page {
            margin: 10px;
        }
    }
}
</style>
